<template>
  <div>
    <div class="swiper-container" ref="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <button class="body1"><span>#备战中秋#</span></button>
        </div>
        <div class="swiper-slide">
        <button class="body2"><span>#夏季冷饮甜点#</span></button>
        </div>
        <div class="swiper-slide">
          <button class="body3" ><span>#早餐#</span></button>
        </div>
        <div class="swiper-slide">
          <button class="body4"><span>#午餐#</span></button>
        </div>
        <div class="swiper-slide">
          <button class="body5"><span>#晚餐#</span></button>
        </div>
        <div class="swiper-slide">
         <button class="body6"><span>#夜宵#</span></button>
        </div>
        <div class="swiper-slide">
          <button class="body7"><span>#外面去吃#</span></button>
        </div>
        <div class="swiper-slide">
          <button class="body8"><span>#外貌协会#</span></button>
        </div>
        <div class="swiper-slide">
          <button class="body9"><span>#做失败了#</span></button>
        </div>
        <div class="swiper-slide">
          <button class="body10"><span>#备战中秋#</span></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入swiper
import "swiper/swiper-bundle.min.css";
// 引入js
import Swiper from "swiper";
export default {
  data() {
    return {
      mySwiper: null,
    };
  },

  mounted() {
    this.$nextTick(() => {
      console.log(this.$refs["swiper-container"]);
      this.mySwiper = new Swiper(this.$refs["swiper-container"], {
        // direction: 'vertical', // 垂直切换选项
        loop: false, // 循环模式选项
        slidesPerView: 4,
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 50px;
 margin-top: -12px;

  .swiper-slide {
    width: 100%;
    display: flex;
    text-align: center;
    display: flex;
    
      
  }
}
.body1 {
  width: 90px;
  height: 32px;
  background: #94bfbb;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
.body2{
      width: 90px;
  height: 32px;
  background: #927472;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
.body3{
      width: 90px;
  height: 32px;
  background: #E5AA9C;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
.body4{
      width: 90px;
  height: 32px;
  background:#5BADA6;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
.body5{
      width: 90px;
  height: 32px;
  background: #b78b9f;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
.body6{
      width: 90px;
  height: 32px;
  background: #acbcc9;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
.body7{
      width: 90px;
  height: 32px;
  background: #acb99b;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
.body8{
      width: 90px;
  height: 32px;
  background:#aca6bb;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
.body9{
      width: 90px;
  height: 32px;
  background: #927472;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
.body10{
      width: 90px;
  height: 32px;
  background: #c3d0ad;
  font-size: 12px;
  color: aliceblue;
  margin-top: 15px;
    border: 1px solid transparent; //自定义边框
    outline: none;
}
</style>
